import React from 'react';
import { Link } from 'react-router';
import './userEdit.css';

const UserEdit = props => (
  <div className="userEdit">
    {/* 头部 */}
    <header className="title">
      <Link className="title__item" to="/home">
        <i className="title__item__tip" />
      </Link>
      <div
        onClick={() => props.noteOperation()}
      >完成</div>
    </header>
    {/* 头部 */}

    {/* 筛选 */}
    <div className="filterBar">
      <p
        className="filterBar__btn"
        onClick={() => props.handleFileterShow()}
      >
        {UserEdit.filters[props.filter].text}<i className="filterBar__tip" />
      </p>
      <div className={`filterBar__wrap${props.showFilter ? ' __active' : ''}`}>
        {
          UserEdit.filters.map(item => (
            <p
              className={`${props.isChecked === item.type ? ' __active' : ''}`}
              key={item.type}
              onClick={() => props.handleFliterCheck(item.type)}
            >
              {item.text}<i className={`filterBar__wrap__tip${props.isChecked === item.type ? ' __active' : ''}`} />
            </p>
          ))
        }
      </div>
    </div>
    {/* 筛选 */}

    {/* 用户输入 */}
    <textarea
      className="userInput" cols="30" rows="10"
      placeholder="记事"
      value={props.userInput}
      onChange={event => props.handleUserInput(event.target.value)}
    />
    {/* 用户输入 */}
  </div>
);

UserEdit.filters = [
  { type: 0, text: '全部' },
  { type: 1, text: '生活' },
  { type: 2, text: '工作' },
  { type: 3, text: '加密' },
];

export default UserEdit;
